<template>
    <div class="fotter">
        <div class="left" >
          <div>
            <img src="../assets/logo.png">
            <span class="wenzi_1">星星电灯</span>
            <span class="wenzi_2">随心所欲</span>
          </div>
        </div>
        <div class="right">
            <div class="progress-container">
            <span class="time current-time">00:00</span>
            <div class="progress-box" id="jindutiao">
                <div class="progress-bar" id="lantiao">
                    <div class="progress-dragger" id="hong"></div>
                </div>
            </div>
            <span class="time duration">00:00</span>
            </div>
        </div>
    </div>  
</template>
<script>
export default {
    name:'CoomFotter',
    data() {
        return {
            
        }
    },
}
</script>
<style lang="less" scoped>
    .fotter{
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 9vh;
    border-top: 1px solid #ccc;
    background-color: white;
    align-items: center;
    min-width: 1800px;
    .left{
        width: 30%;
        height: 100%;
        background-color: turquoise;
        img{
            margin-top: 5px;
            margin-left: 10px;
            width: 60px;
            height: 60px;
        }
        .wenzi_1{
            position: absolute;
            font-size: 14px;
            margin-top: 10px;
            margin-left: 10px;
        }
        .wenzi_2{
            position: absolute;
            font-size: 14px;
            margin-top: 36px;
            margin-left: 10px;
        }
    }
    .right{
        width: 70%;
        height: 100%;
        background-color: wheat;
    }
    }
    .progress-box{
      width: 30%;
      height:10px;
      background:rgba(241,241,241,1);
      border-radius:5px;
    }
    .progress-bar{
      width: 0;
      height:2px;
      background:rgba(115,164,255,1);
      border-radius:5px;
      position: relative;
    }
    .progress-dragger{
      width: 14px;
      height: 14px;
      background: url('../assets/456.png') no-repeat;
      background-size: 100%;
      position: absolute;
      top: 50%;
      right: -9px;
      transform: translateY(-50%);
      cursor: pointer;
    }
    .progress-container{
      flex: 1;
      display: flex;
      align-items: center;
      margin-top: 40px;
      margin-left: 290px;
    }
</style>